<template>
  <div id="role-edit">
    <el-container>
      <el-main style="padding-bottom: 0px;padding-top: 0px" >
        <el-form label-width="100px">
          <el-form-item label="归属公司">
            <el-select clearable v-model="form.companyId" placeholder="请选择归属公司">
              <el-option v-for="(item,index) of companies" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司编号" style="width: 320px;">
            <el-input readonly v-model="form.companyCode" placeholder="请选择归属公司"></el-input>
          </el-form-item>
        </el-form>
        <el-form label-width="100px" inline>
          <el-form-item style="width: 320px;" :label="button.children[1].name">
            <el-input readonly v-model="form.office" :placeholder="'请选择' +button.children[1].name "></el-input>
          </el-form-item>
          <el-form-item>
            <union-select :placeholder="'请选择' +button.children[1].name " :url="button.children[1].target"
                          :permission="button.children[1].id" init-value="0" @choseItem="choseOffice"></union-select>
          </el-form-item>
        </el-form>
        <el-form label-width="100px">
          <el-form-item style="width: 320px;" label="部门编号">
            <el-input v-model="form.officeCode" placeholder="请选择归属部门" readonly></el-input>
          </el-form-item>
        </el-form>
        <el-form label-width="100px">
          <el-form-item label="角色名称" style="width: 320px;">
            <el-input v-model="form.name" placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <el-form-item label="角色编号" style="width: 320px;">
            <el-input v-model="suffixCode" placeholder="请输入角色编号"></el-input>
          </el-form-item>
        </el-form>
        <el-form label-width="100px" inline>
          <el-form-item style="width: 320px;" :label="button.children[2].name">
            <el-input readonly v-model="form.roleType" :placeholder="'请选择' +button.children[2].name "></el-input>
          </el-form-item>
          <el-form-item>
            <union-select :placeholder="'请选择' +button.children[2].name " :url="button.children[2].target"
                          :permission="button.children[2].id" init-value="winfo_bd94a04c28e0ed11e9b6c954e1add85a5d"
                          @choseItem="choseRoleType"></union-select>
          </el-form-item>
        </el-form>
        <el-form label-width="100px" inline>
          <el-form-item style="width: 320px;" :label="button.children[3].name">
            <el-input readonly v-model="form.dataPermission" :placeholder="'请选择' +button.children[3].name "></el-input>
          </el-form-item>
          <el-form-item>
            <union-select :placeholder="'请选择' +button.children[3].name " :url="button.children[3].target"
                          :permission="button.children[3].id" init-value="winfo_bd053d304ee0ef11e9b6c954e1add85a5d"
                          @choseItem="choseDataPermission"></union-select>
          </el-form-item>
        </el-form>
        <el-form label-width="100px">
          <el-form-item label="是否设置权限">
            <el-switch
              active-text="已设置"
              inactive-text="未设置"
              v-model="isSetPermission"
              disabled>
            </el-switch>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer height="100%">
        <el-divider></el-divider>
        <el-form label-width="100px" inline>
          <el-form-item label=" ">
            <el-button @click="submit" size="small" type="primary" icon="el-icon-s-promotion">提交</el-button>
            <el-button size="small"  @click="setPermission" v-if="button.children[4].havePermission" >设置权限</el-button>
          </el-form-item>
        </el-form>
      </el-footer>
    </el-container>
    <menu-select v-show="menuSelect.show" :select-keys="permissionIds" @choseMenu="choseMenu" :button="button.children[4]"></menu-select>
  </div>
</template>

<script>
  import unionSelect from '../../../common/union-select'
  import menuSelect from '../../../common/menu-select'
  export default {
    name: "role-edit",
    components: {
      unionSelect,
      menuSelect
    },
    methods: {
      getSuffixCode() {
        if (this.common.isNotEmpty(this.form.code) && this.common.isNotEmpty(this.form.officeCode)) {
          this.suffixCode = this.form.code.substring(this.form.officeCode.length)
        }
      },
      choseMenu(permissionIds){
        this.permissionIds = permissionIds
        this.common.closeBox('menu-select')
      },
      setPermission(){
        let that = this
        this.$set(that.menuSelect,'show',true)
        that.common.openBox({
          id:'menu-select',
          title:'菜单选择器',
          area:['400px','600px'],
          callback:()=>{
            this.$set(that.menuSelect,'show',false)
          },
        })
      },
      savePermission(id){
        this.common.request({
          url:this.button.children[5].target,
          param:{
            roleId:id,
            menuIds:this.permissionIds
          },
          permission:this.button.children[5].id,
          loading: false,
          success:res=>{
            if (res.code == 1){
              this.$emit('save')
            }
          }
        })
      },
      submit() {
        if (!this.validate()) {
          return
        }
        this.form.code = this.form.officeCode + this.suffixCode
        this.common.request({
          url: this.button.target,
          param: this.form,
          permission: this.button.id,
          success: res => {
            if (res.code == 1) {
              if (this.isSetPermission){
                this.savePermission(res.data.rows[0].id)
              }else{
                this.$emit('save')
              }
            }
          }
        })
      },
      validate() {
        let validateData = [
          {key: this.form.name, msg: '角色名'},
          {key: this.suffixCode, msg: '角色编号'},
          {key: this.form.companyId, msg: '归属公司'},
          {key: this.form.officeId, msg: '归属部门'},
          {key: this.form.roleTypeId, msg: '角色类型'},
          {key: this.form.dataPermissionId, msg: '数据权限范围'},
        ]
        return this.common.validate(validateData)
      },
      choseOffice(content) {
        this.$set(this.form, 'officeId', content.id)
        this.$set(this.form, 'office', content.name)
        this.$set(this.form, 'officeCode', content.code)
      },
      choseRoleType(content) {
        this.$set(this.form, 'roleTypeId', content.id)
        this.$set(this.form, 'roleType', content.name)
      },
      choseDataPermission(content) {
        this.$set(this.form, 'dataPermissionId', content.id)
        this.$set(this.form, 'dataPermission', content.name)
      },
      initCompany() {
        this.common.request({
          url: this.button.children[0].target,
          param: {
            parentId: '0'
          },
          permission: this.button.children[0].id,
          loading: false,
          success: res => {
            if (res.code == 1) {
              this.companies = res.data.rows
            }
          }
        })
      }
    },
    mounted() {
      this.initCompany()
      this.getSuffixCode()
      if (this.common.isNotEmpty(this.form.permissionIds)) {
        this.permissionIds = this.form.permissionIds
      }
    },
    data() {
      return {
        companies: [],
        suffixCode: '',
        menuSelect:{
          show:false
        },
        permissionIds:'',
        isSetPermission:false
      }
    },
    watch: {
      form:{
        handler(val){
          if (this.common.isNotEmpty(val.companies)) {
            let chose = {}
            this.companies.forEach(company => {
              if (this.form.companyId == company.id) {
                chose = company
              }
            })
            this.$set(this.form, 'companyCode', chose.code)
          }

        }
      },
      permissionIds(val){
        if (this.common.isEmpty(val)){
          this.isSetPermission = false
        } else {
          this.isSetPermission = true
        }
      },
    },
    props: {
      form: {
        type: Object,
        default() {
          return {
            id: '',
            name: '',
            code: '',
            company: '',
            companyId: '',
            companyCode: '',
            office: '',
            officeId: '',
            officeCode: '',
            roleType: '',
            roleTypeId: '',
            dataPermission: '',
            dataPermissionId: '',
            permissionIds:'',
          }
        }
      },
      unionButton: {
        type: Object
      },
      button: {
        type: Object
      }
    }
  }
</script>

<style scoped>

</style>
